<template>
  <section class="vbox">
    <section class="w-f-md" id="bjax-target">
      <section class="hbox stretch">
        <!-- side content -->
        <aside class="aside bg-light dk" id="sidebar">
          <section class="vbox animated fadeInUp">
            <section class="scrollable hover">
              <div v-for="(item,index) in topList" class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <a class="list-group-item" @click='changedTouches(index,item)' :class='{"active":isactive==index}'>
                  {{item}}
                </a>
              </div>
            </section>
          </section>
        </aside>
        <!-- / side content -->
        <section>
          <section class="vbox">
            <section class="scrollable padder-lg">
              <h2 class="font-thin m-b">{{Acoustic}}</h2>
              <div class="row row-sm">
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" v-for="(item,index) in data.result.tracks">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n" @click='playMusic(item.id)'>
                          <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a >
                        <img v-lazy="item.album.picUrl"
                        alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true"
                         class="text-ellipsis">{{item.name}}-({{item.album.name}})</a>
                      <a data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true"
                         class="text-ellipsis text-xs text-muted">{{item.artists[0].name}}</a>
                    </div>
                  </div>
                </div>
              </div>
              <ul class="pagination pagination">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
              </ul>
            </section>
          </section>
        </section>
      </section>
    </section>
    <footerPlay bgcolor='bg-warning'></footerPlay>
    <loading v-show='active'></loading>
  </section>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'

  import loading from '../loading/loading.vue'
  import footerPlay from '../player/footerPlay.vue'
  export default {
    components:{loading,footerPlay},
    data() {
      return {
        topList: [
          " 云音乐新歌榜",
          " 云音乐热歌榜",
          " 网易原创歌曲榜",
          " 云音乐飙升榜",
          " 云音乐电音榜",
          " UK排行榜周榜",
          " 美国Billboard周榜",
          " KTV嗨榜",
          " iTunes榜",
          " Hit FM Top榜",
          "  日本Oricon周榜",
          "  韩国Melon排行榜周榜",
          "  韩国Mnet排行榜周榜",
          "  韩国Melon原声周榜",
          "  中国TOP排行榜(港台榜)",
          "  中国TOP排行榜(内地榜)",
          "  香港电台中文歌曲龙虎榜",
          "  华语金曲榜",
          "  中国嘻哈榜",
          "  法国 NRJ EuroHot 30周榜",
          "  台湾Hito排行榜",
          "  Beatport全球电子舞曲榜"
        ],
        isactive: 1,   //当前选中的
        Acoustic:'云音乐热歌榜',   //当前的tab
      }
    },
    mounted() {
      this.$store.commit('fetchData',{url: '/top/list?idx='+this.isactive})
    },
    computed: mapGetters([  //变量
      'data',
      'active'
    ]),
    methods: {
      changedTouches(index,item){
        var vm=this;
        vm.isactive=index;
        vm.Acoustic=item;
        this.$store.commit('fetchData',{url: '/top/list?idx='+vm.isactive})
      },
      playMusic(musicId) {
        var vm = this;
        var url = '/music/url?id=' + musicId;
        this.$http.get(url).then(function (res) {
          vm.musicUrl = res.data.data[0].url;
          vm.$store.commit('setMusicUrl',{url:vm.musicUrl})
        })
      }
    }
  }
</script>
<style>

</style>
